<template>
    <div>
      <div>
        <el-form>
          <el-row>
            <el-col :span="6">
              <!-- <el-form-item label-width="60px"> -->
                <span style="margin-left: 10px;font-size:12px;color:#606266;"><b>成语名称</b></span>
                <el-input style="width:160px;margin-left:10px;" v-model="queryPictureFrom.pictureIdiomName" placeholder="请输入成语名称：" :maxlength="4" show-word-limit>
                </el-input>
              <!-- </el-form-item> -->
            </el-col>
            <!-- <el-col :span="4">
              <el-form-item label="">
                <span style="margin-left: 10px;font-size:12px;color:#606266;"><b>所属关卡</b></span>
                <el-select style="width: 140px;margin-left:10px" v-model="queryPictureFrom.levelId" placeholder="请选择关卡：">
                  <el-option v-for="item in dictData" :key="item.id" :label="item.levelId" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="5">
              <el-button style="width:70px" type="primary" size="mini" @click="getPictureIdiomQuestion">搜索</el-button>
              <el-button style="width:70px;margin-left:10px" size="mini" plain @click="queryPictureFrom={}">重置</el-button>
              <el-button type="danger" plain style="margin-left:10px" @click="updataDelete">批量删除</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
        <!-- {{ PictureIdiomQuestionData }}  -->
        <!-- <el-button @click="savePictureIdiomQuestionWindows()">添加</el-button> -->
        <el-table :data="PictureIdiomQuestionData" style="width: 100%"  @selection-change="checkedExport"
        ref="multipleTable">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="expand">
            <template slot-scope="props">
                <el-row>
                  <el-col :span="1"><div style="height:1px"></div></el-col>
                  <el-col :span="2"><span>成语名称：</span></el-col>
                  <el-col :span="8">
                    <span class="spans">{{ props.row.pictureIdiomName }}</span>
                    <!-- <span>{{ props.row.pinyin }}</span> -->
                  </el-col>
                  <el-col :span="4"><div style="he  ight:1px"></div></el-col>
                </el-row>
                <div style="height:10px"></div>
                <el-row>
                  <el-col :span="1"><div style="height:1px"></div></el-col>
                  <el-col :span="2"><span>成语出处：</span></el-col>
                  <el-col :span="16"><span>{{ props.row.pictureIdiomSource }}</span></el-col>
                  <el-col :span="4"><div style="height:1px"></div></el-col>
                </el-row>
                <div style="height:10px"></div>
                <el-row>
                  <el-col :span="1"><div style="height:1px"></div></el-col>
                  <el-col :span="2"><span>成语释义：</span></el-col>
                  <el-col :span="16"><span>{{ props.row.interpretation }}</span></el-col>
                  <el-col :span="1"><div style="height:1px"></div></el-col>
                </el-row>
                <div style="height:10px"></div>
                <el-row>
                  <el-col :span="1"><div style="height:1px"></div></el-col>
                  <el-col :span="2"><span>正确字1：</span></el-col>
                  <el-col :span="1"><span>{{ props.row.correctOne }}</span></el-col>
                  <el-col :span="2"><span>正确字2：</span></el-col>
                  <el-col :span="1"><span>{{ props.row.correctTwo }}</span></el-col>
                  <el-col :span="2"><span>正确字3：</span></el-col>
                  <el-col :span="1"><span>{{ props.row.correctThree }}</span></el-col>
                  <el-col :span="2"><span>正确字4：</span></el-col>
                  <el-col :span="1"><span>{{ props.row.correctFour }}</span></el-col>
                  <el-col :span="1"><div style="height:1px"></div></el-col>
                </el-row>
                <div style="height:10px"></div>
                <el-row>
                  <el-col :span="1"><div style="height:1px"></div></el-col>
                  <el-col :span="2"><span>迷惑字1：</span></el-col>
                  <el-col :span="1"><span>{{ props.row.mistakeOne }}</span></el-col>
                  <el-col :span="2"><span>迷惑字2：</span></el-col>
                  <el-col :span="1"><span>{{ props.row.mistakeTwo }}</span></el-col>
                  <el-col :span="2"><span>迷惑字3：</span></el-col>
                  <el-col :span="1"><span>{{ props.row.mistakeThree }}</span></el-col>
                  <el-col :span="2"><span>迷惑字4：</span></el-col>
                  <el-col :span="1"><span>{{ props.row.mistakeFour }}</span></el-col>
                  <el-col :span="1"><div style="height:1px"></div></el-col>
                </el-row>
                <div style="height:10px"></div>
                <el-row>
                  <el-col :span="1"><div style="height:1px"></div></el-col>
                  <el-col :span="2"><span>迷惑字5：</span></el-col>
                  <el-col :span="1"><span>{{ props.row.mistakeFive }}</span></el-col>
                  <el-col :span="2"><span>迷惑字6：</span></el-col>
                  <el-col :span="1"><span>{{ props.row.mistakeSix }}</span></el-col>
                  <el-col :span="2"><span>迷惑字7：</span></el-col>
                  <el-col :span="1"><span>{{ props.row.mistakeSeven }}</span></el-col>
                  <el-col :span="2"><span>迷惑字8：</span></el-col>
                  <el-col :span="1"><span>{{ props.row.mistakeEight }}</span></el-col>
                  <el-col :span="1"><div style="height:1px"></div></el-col>
                </el-row>
            </template>
            </el-table-column>
            <el-table-column 
            width="120"
            label="成语名称"
            prop="pictureIdiomName">
            </el-table-column>
            <el-table-column label="成语图片" width="" align="center">
                <template slot-scope="scope">
                <el-image style="width: 120px; height: 70px" :src="
                    'http://101.43.223.224:8765/image/getImageById?id=' + scope.row.imageName">
                </el-image>
                </template>
            </el-table-column>
            <el-table-column align="center"
            label="添加时间"
            prop="createTime">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="360" align="center">
                <template slot-scope="scope">
                    <!-- <el-button @click="selectPictureIdiomQuestion(scope.row)">详情</el-button> -->
                    <!-- <el-button @click="OpenIdiom(scope.row.id)">模拟器</el-button> -->
                    <!-- <el-button @click="updataPictureWindows(scope.row)" type="primary" size="small">编辑</el-button> -->
                  <el-button type="primary" size="small" style="background:none;border:0px"><span style="color:#409EFF;" @click="selectPictureIdiomQuestion(scope.row)"><i class="el-icon-share"></i>详情</span></el-button>
                  <el-button type="primary" size="small" style="background:none;border:0px"><span style="color:#409EFF;" @click="updataPictureWindows(scope.row)"><i class="el-icon-edit"></i>修改</span></el-button>
                  <el-button @click="updateDeletes(scope.row.id)" type="primary" size="small" slot="reference" style="background:none;border:0px"><span style="color:#409EFF;"><i class="el-icon-delete"></i>删除</span></el-button>
                  <!-- <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="delTeacher(scope.row.id)"> -->
                  <!-- <el-button type="primary" size="small" slot="reference" style="background:none;border:0px"><span style="color:#409EFF;"><i class="el-icon-delete"></i>删除</span></el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalSize">
        </el-pagination>
        <!-- 查看成语弹窗 -->
        <el-dialog title="成语详情" :visible.sync="selectPictureIdiomQuestionWindows">
          <div style="width: 100%; height: 100%; margin-left: 11%;">
            <el-upload
                class="avatar-uploader"
                action="http://127.0.0.1:16000/ImageFile/addImageFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
            <!-- 查看表单 selectPictureIdiomQuestionForm   -->
            <el-form :model="selectPictureIdiomQuestionForm" ref="selectPictureIdiomQuestionForm" label-width="100px">
              <el-row>
                <el-col :span="5">
                  <el-form-item label="成语名称" prop="pictureIdiomName">
                    <el-input v-model="selectPictureIdiomQuestionForm.pictureIdiomName" :maxlength="4" show-word-limit style="width: 110px;" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="所属关卡" prop="levelId">
                    <el-input v-model="selectPictureIdiomQuestionForm.levelId" style="width: 50px;" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            <el-form-item label="成语出处" prop="pictureIdiomSource">
              <el-input :disabled="true"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入成语出处"
                  v-model="selectPictureIdiomQuestionForm.pictureIdiomSource" style="width: 618px;">
                </el-input>
            </el-form-item>
            <el-form-item label="成语释义" prop="interpretation">
              <el-input :disabled="true"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入成语释义"
                  v-model="selectPictureIdiomQuestionForm.pictureIdiomSource" style="width: 618px;">
                </el-input>
            </el-form-item>
            <el-row>
                <el-col :span="5">
                  <el-form-item label="正确字1" prop="correctOne">
                    <el-input v-model="selectPictureIdiomQuestionForm.correctOne" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="正确字2" prop="correctTwo">
                    <el-input v-model="selectPictureIdiomQuestionForm.correctTwo" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="正确字3" prop="correctThree">
                    <el-input v-model="selectPictureIdiomQuestionForm.correctThree" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="正确字4" prop="correctFour">
                    <el-input v-model="selectPictureIdiomQuestionForm.correctFour" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="5">
                  <el-form-item label="迷惑字1" prop="mistakeOne">
                    <el-input v-model="selectPictureIdiomQuestionForm.mistakeOne" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="迷惑字2" prop="mistakeTwo">
                    <el-input v-model="selectPictureIdiomQuestionForm.mistakeTwo" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="迷惑字3" prop="mistakeThree">
                    <el-input v-model="selectPictureIdiomQuestionForm.mistakeThree" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="迷惑字4" prop="mistakeFour">
                    <el-input v-model="selectPictureIdiomQuestionForm.mistakeFour" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="5">
                  <el-form-item label="迷惑字5" prop="mistakeFive">
                    <el-input v-model="selectPictureIdiomQuestionForm.mistakeFive" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="迷惑字6" prop="mistakeSix">
                    <el-input v-model="selectPictureIdiomQuestionForm.mistakeSix" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="迷惑字7" prop="mistakeSeven">
                    <el-input v-model="selectPictureIdiomQuestionForm.mistakeSeven" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="迷惑字8" prop="mistakeEight">
                    <el-input v-model="selectPictureIdiomQuestionForm.mistakeEight" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
          </el-form>
            <div style="height:10px;margin-right: 20px;">
            <div style="float:right;">
              <!-- <el-button style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)" @click="savePictureIdiomQuestion()">确 定</el-button> -->
              <el-button @click="addPictureIdiomQuestion = false" style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)">取 消</el-button>
            </div>  
          </div>
        </el-dialog>
        <!-- 修改成语弹窗 -->
        <el-dialog title="修改成语" :visible.sync="updataPictureIdiomQuestion" width="47%">
          <div style="width: 100%; height: 100%; margin-left: 12%;">
            <el-upload
                class="avatar-uploader"
                action="http://127.0.0.1:16000/ImageFile/addImageFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
            <!-- 修改表单 -->
            <el-form :model="UpdataPictureIdiomQuestionForm" ref="UpdataPictureIdiomQuestionForm" :rules="rules" label-width="100px">
            <el-form-item label="成语名称" prop="pictureIdiomName">
              <el-input v-model="UpdataPictureIdiomQuestionForm.pictureIdiomName" :maxlength="4" show-word-limit style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item label="成语出处" prop="pictureIdiomSource">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入成语出处"
                  v-model="UpdataPictureIdiomQuestionForm.pictureIdiomSource" style="width: 618px;">
                </el-input>
            </el-form-item>
            <el-form-item label="成语释义" prop="interpretation">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入成语释义"
                  v-model="UpdataPictureIdiomQuestionForm.pictureIdiomSource" style="width: 618px;">
                </el-input>
            </el-form-item>
            <el-row>
                <el-col :span="5">
                  <el-form-item label="正确字1" prop="correctOne">
                    <el-input v-model="UpdataPictureIdiomQuestionForm.correctOne"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="正确字2" prop="correctTwo">
                    <el-input v-model="UpdataPictureIdiomQuestionForm.correctTwo"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="正确字3" prop="correctThree">
                    <el-input v-model="UpdataPictureIdiomQuestionForm.correctThree"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="正确字4" prop="correctFour">
                    <el-input v-model="UpdataPictureIdiomQuestionForm.correctFour"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="5">
                  <el-form-item label="迷惑字1" prop="mistakeOne">
                    <el-input v-model="UpdataPictureIdiomQuestionForm.mistakeOne"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="迷惑字2" prop="mistakeTwo">
                    <el-input v-model="UpdataPictureIdiomQuestionForm.mistakeTwo"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="迷惑字3" prop="mistakeThree">
                    <el-input v-model="UpdataPictureIdiomQuestionForm.mistakeThree"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="迷惑字4" prop="mistakeFour">
                    <el-input v-model="UpdataPictureIdiomQuestionForm.mistakeFour"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="5">
                  <el-form-item label="迷惑字5" prop="mistakeFive">
                    <el-input v-model="UpdataPictureIdiomQuestionForm.mistakeFive"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="迷惑字6" prop="mistakeSix">
                    <el-input v-model="UpdataPictureIdiomQuestionForm.mistakeSix"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="迷惑字7" prop="mistakeSeven">
                    <el-input v-model="UpdataPictureIdiomQuestionForm.mistakeSeven"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="迷惑字8" prop="mistakeEight">
                    <el-input v-model="UpdataPictureIdiomQuestionForm.mistakeEight"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
          </el-form>
            <div style="height:10px;margin-right: 20px;">
            <div style="float:right;">
              <el-button style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)" @click="updataPicture()">确 定</el-button>
              <el-button @click="addPictureIdiomQuestion = false" style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)">取 消</el-button>
            </div>  
          </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            PictureIdiomQuestionData: [],
            // 修改数据
            UpdataPictureIdiomQuestionForm: {},
            // 打开页面时修改窗口处于关闭状态
            updataPictureIdiomQuestion: false,
            imageUrl: '',
            queryPictureFrom: {},
            // 分页
            page: {
                totalSize: 0,
                pageNum: 1,
                pageSize: 10
            },
            PictureIdiomQuestionForm: [],
            addPictureIdiomQuestion: false,
            imageUrl: '',
            // 成语详情窗口关闭
            selectPictureIdiomQuestionWindows: false,
            selectPictureIdiomQuestionForm: {},
            // 表单校验
            rules: {
              pictureIdiomName: [
                { required: true, message: "请输入成语名称", trigger: "blur" },
              ],
              pictureIdiomSource: [
                { required: true, message: "请输入成语出处", trigger: "blur" },
              ],
              interpretation: [
                { required: true, message: "请输入成语释义", trigger: "blur" },
              ],
              correctOne: [
                { required: true, message: "请输入正确字1", trigger: "blur" },
              ],
              correctTwo: [
                { required: true, message: "请输入正确字2", trigger: "blur" },
              ],
              correctThree: [
                { required: true, message: "请输入正确字3", trigger: "blur" },
              ],
              correctFour: [
                { required: true, message: "请输入正确字4", trigger: "blur" },
              ],
              mistakeOne: [
                { required: true, message: "请输入迷惑字1", trigger: "blur" },
              ],
              mistakeTwo: [
                { required: true, message: "请输入迷惑字1", trigger: "blur" },
              ],
              mistakeThree: [
                { required: true, message: "请输入迷惑字1", trigger: "blur" },
              ],
              mistakeFour: [
                { required: true, message: "请输入迷惑字1", trigger: "blur" },
              ],
              mistakeFive: [
                { required: true, message: "请输入迷惑字1", trigger: "blur" },
              ],
              mistakeSix: [
                { required: true, message: "请输入迷惑字1", trigger: "blur" },
              ],
              mistakeSeven: [
                { required: true, message: "请输入迷惑字1", trigger: "blur" },
              ],
              mistakeEight: [
                { required: true, message: "请输入迷惑字1", trigger: "blur" },
              ],
            },
            selectRowIds: []
        }
    },
    mounted () {
        this.getPictureIdiomQuestion()
    },
    methods: {
      // 成语删除
      updateDeletes (id) {
            this.$confirm('是否删除该用户信息', '提示', {
                confirmButtonClass: '确定',
                cancelButtonText: '取消',
                type: 'waning'
            }).then(() => {
                this.$axios.delete('/PictureIdiomQuestion/deletePictureIdioms', {
                params: {
                    id: id
                }
                }).then(res => {
                if (res.data.flag) {
                    this.getPictureIdiomQuestion()
                    this.$message({ message: '删除成功!', type: 'success' })
                } else {
                    this.Mymessage('waning', '删除失败!')
                }
                }).catch(res => {
                this.Mymessage('error', '删除失败,请联系管理员')
                })
            }).catch(() => {
                this.Mymessage('info', '已取消删除')
            })
        },
      // 修改成语
      updataPicture () {
          debugger
          const form = new FormData()
            // 图片
            if (this.file) {
                form.append("file",this.file)
            }
            // console.log("数据： " + file)
            form.set('id', this.UpdataPictureIdiomQuestionForm.id)
            // 成就名字
            form.set('pictureIdiomName', this.UpdataPictureIdiomQuestionForm.pictureIdiomName)
            // 成语出处
            form.set('pictureIdiomSource', this.UpdataPictureIdiomQuestionForm.pictureIdiomSource)
            // 奖励积分
            form.set('interpretation', this.UpdataPictureIdiomQuestionForm.interpretation)
            // 达成条件
            form.set('pictureTypos', this.UpdataPictureIdiomQuestionForm.pictureTypos)
            // 达成条件
            form.set('levelId', this.UpdataPictureIdiomQuestionForm.levelId)
            // 正确字1
            form.set('correctOne', this.UpdataPictureIdiomQuestionForm.correctOne)
            // 正确字2
            form.set('correctTwo', this.UpdataPictureIdiomQuestionForm.correctTwo)
            // 正确字3
            form.set('correctThree', this.UpdataPictureIdiomQuestionForm.correctThree)
            // 正确字4
            form.set('correctFour', this.UpdataPictureIdiomQuestionForm.correctFour)
            // 迷惑字1
            form.set('mistakeOne', this.UpdataPictureIdiomQuestionForm.mistakeOne)
            // 迷惑字2
            form.set('mistakeTwo', this.UpdataPictureIdiomQuestionForm.mistakeTwo)
            // 迷惑字3
            form.set('mistakeThree', this.UpdataPictureIdiomQuestionForm.mistakeThree)
            // 迷惑字4
            form.set('mistakeFour', this.UpdataPictureIdiomQuestionForm.mistakeFour)
            // 迷惑字5
            form.set('mistakeFive', this.UpdataPictureIdiomQuestionForm.mistakeFive)
            // 迷惑字6
            form.set('mistakeSix', this.UpdataPictureIdiomQuestionForm.mistakeSix)
            // 迷惑字7
            form.set('mistakeSeven', this.UpdataPictureIdiomQuestionForm.mistakeSeven)
            // 迷惑字8
            form.set('mistakeEight', this.UpdataPictureIdiomQuestionForm.mistakeEight)
            console.log("数据： " + this.file)
          this.$axios.put('/PictureIdiomQuestion/updatePictureIdiom',form).then(res => {
                if (res.data.flag) {
                    this.Mymessage('success', '恭喜您，操作成功')
                    this.updataPictureIdiomQuestion = false
                    this.getPictureIdiomLevelDetail()
                } else {
                    this.Mymessage('waning', '很抱歉，操作失败')
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 用户表修改弹窗
        updataPictureWindows (data) {
            this.UpdataPictureIdiomQuestionForm = JSON.parse(JSON.stringify(data))
            // this.UserLoginNameRole = this.userupdateForm.userLoginName
            this.updataPictureIdiomQuestion = true
            this.imageUrl = 'http://101.43.223.224:8765/image/getImageById?id=' + data.imageName
        },
      // 成语删除方法
      updataDelete () {
          const id = this.selectRowIds.join(',')
          debugger
          console.log("id值： " + id)
            this.$axios.delete('/PictureIdiomQuestion/delete/' + id, {
            params: {
                id
            }
            }).then(res => {
              if (res.data.flag) {
                this.getPictureIdiomQuestion()
                this.$message({ message: '删除成功！', type: 'success' })
              } else {
                this.Mymessage('waning', '删除失败！')
              }
            })
        },
        // 全查方法
        getPictureIdiomQuestion () {
            this.$axios.get('/PictureIdiomQuestion/queryPictureIdiomQuestion', {
                params: {
                    // 当前页
                    pageNum: this.page.pageNum,
                    // 每页条数
                    pageSize: this.page.pageSize,
                    // 模糊查询成语名称
                    pictureIdiomName: this.queryPictureFrom.pictureIdiomName
                }
            }).then (res => {
                if(res.data.flag) {
                    this.PictureIdiomQuestionData = res.data.data.content
                    this.page.totalSize = res.data.data.totalSize
                    console.log(this.PictureIdiomQuestionData);
                } this.loading = false
            }).catch(err => {
                this.Mymessage('error', err)
            })
        },
        // 分页
        handleSizeChange (val) { 
            this.page.pageSize = val
            this.getPictureIdiomQuestion()
        },
        // 分页
        handleCurrentChange (val) { 
            this.page.pageNum = val
            this.getPictureIdiomQuestion()
        },
        // 弹窗提示
        Mymessage (type, text) { 
            this.$message({
                showClose: true,
                message: text,
                type: type
            })
        },
        selectPictureIdiomQuestion (data) {
            // 打开成语详情窗口
            this.selectPictureIdiomQuestionWindows = true
            this.selectPictureIdiomQuestionForm = JSON.parse(JSON.stringify(data))
            this.imageUrl = 'http://101.43.223.224:8765/image/getImageById?id=' + data.imageName
        },
        // 模拟器
        OpenIdiom(id) {
            const params = encodeURIComponent(JSON.stringify(id));
            this.$router.push({ 
                path: '/IdiomDetail',
                 query: { 
                    id: params
                } 
            });
        },
        // 添加成就
        savePictureIdiomQuestion () {
            const form = new FormData()
            // 图片
            if (this.file) {
                form.append("file",this.file)
            }
            // form.set('id', this.PictureIdiomQuestionForm.id)
            // 成就名字
            form.set('pictureIdiomName', this.PictureIdiomQuestionForm.pictureIdiomName)
            // 成就描述
            form.set('pictureIdiomSource', this.PictureIdiomQuestionForm.pictureIdiomSource)
            // 奖励积分
            form.set('Interpretation', this.PictureIdiomQuestionForm.Interpretation)
            // 关卡
            form.set('levelId', this.PictureIdiomQuestionForm.levelId)
            // 关卡
            form.set('correctOne', this.PictureIdiomQuestionForm.correctOne)
            // 关卡
            form.set('correctTwo', this.PictureIdiomQuestionForm.correctTwo)
            // 关卡
            form.set('correctThree', this.PictureIdiomQuestionForm.correctThree)
            // 关卡
            form.set('correctFour', this.PictureIdiomQuestionForm.correctFour)
            // 关卡
            form.set('mistakeOne', this.PictureIdiomQuestionForm.mistakeOne)
            // 关卡
            form.set('mistakeTwo', this.PictureIdiomQuestionForm.mistakeTwo)
            // 关卡
            form.set('mistakeThree', this.PictureIdiomQuestionForm.mistakeThree)
            // 关卡
            form.set('mistakeFour', this.PictureIdiomQuestionForm.mistakeFour)
            // 关卡
            form.set('mistakeFive', this.PictureIdiomQuestionForm.mistakeFive)
            // 关卡
            form.set('mistakeSix', this.PictureIdiomQuestionForm.mistakeSix)
            // 关卡
            form.set('mistakeSeven', this.PictureIdiomQuestionForm.mistakeSeven)
            // 关卡
            form.set('mistakeEight', this.PictureIdiomQuestionForm.mistakeEight)
            // if (this.file != null) {
            //     form.set('file', this.file, this.file.name)
            // }
            this.$axios.post('/PictureIdiomQuestion/addPictureIdiomQuestion', form).then(res => {
                if (res.data.flag) {
                    this.Mymessage('success', res.data.data)
                    this.addPictureIdiomQuestion = false
                    // this.PictureIdiomQuestionForm = {}
                    this.getPictureIdiomQuestion()
                    // this.file = null
                } else{
                    this.Mymessage('waning', '操作失败')
                }
            })
        },
        // 添加方法
        savePictureIdiomQuestionWindows () {
            this.PictureIdiomQuestionForm = {}
            this.addPictureIdiomQuestion = ''
            // this.addPictureIdiomQuestion = true
            // this.getPictureIdiomQuestion()
        },
        handleSelectionChange(val) {
          // console.log(val);
          this.multipleSelection = val
        },
        checkedExport (val) {
          const id = val.map(item => item.id)
          this.selectRowIds = id
        },
        toggleSelection (rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row)
            })
          } else {
            this.$refs.multipleTable.clearSelection()
          }
        },
        // 图片上传
        handleAvatarSuccess (res, file) { // 上传成功后的回调函数
            // this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload (file) { // 上传之前的图片校验
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
                return false
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
                return false
            }
            this.imageUrl = URL.createObjectURL(file)
            this.file = file
            return false
        }
    }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .el-col-6 {
    width: 18%;
    margin-left: 0%;
}
  .el-col-2 {
    width: 4.33333%;
}
.el-col-3 {
    width: 11.5%;
}
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 145px;
    height: 145px;
    line-height: 145px;
    text-align: center;
  }
  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }
</style>